<template>
  <div class="boardBox2">
    <div class="flex">
      <div class="flex-1 flex box-row-column ggpadzy20">
        <div class="font17">应用凭证</div>
        <div class="flex box-align-center justify-content-center uploadk mt20">
          <el-upload
            class="avatar-uploader"
            ref="uploadRef"
            name="file"
            :limit="1"
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            action
            drag
            :on-exceed="handleExceed"
            :file-list="filelist"
            :on-change="handleChansge"
          >
            <div class="flex box-row-column box-align-center" style="width: 100%">
              <el-icon size="30"><UploadFilled /></el-icon>
              <div class="el-upload_tip mt10">点击或者拖拽需要上传的文件</div>
              <div class="el-upload_tip mt10">只支持xIs、xIsx格式文件</div>
            </div>
          </el-upload>
        </div>

        <span slot="footer" class="dialog-footer mt20" style="text-align: right">
          <el-button type="primary" color="#01509f" @click="submitForm">确认导入</el-button>
        </span>
      </div>

      <div class="flex-1 flex box-row-column impborderleft ggpadzy20">
        <div class="flex box-align-center">
          <div class="font17 flex-1">钉钉导入步骤</div>

          <div class="down_zi flex box-align-center" @click="downmb">
            <div>查看更多帮助</div>

            <div class="bzpng"></div>
          </div>
        </div>

        <div class="importcontent mt20">
          钉钉导入：
          <br />

          1.使用管理员账号登录钉钉客户端——＞选择工作台——＞选择智能人事——＞点击人事——＞点击花名册——>点击导出——>选择标准导出（注意不要点击“高级导出“）——>全选导出字段——>点击导出
          <br />

          2.将导出的文件上传，点击确定导入即可
        </div>
      </div>
    </div>
    <div class="flex box-row-column mt20">
      <div class="dtpborder_bottom"></div>

      <div class="font16 mt10">同步记录</div>

      <el-table :data="list" border class="mt10" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)" element-loading-text="加载中..." header-row-class-name="table-header">
        <el-table-column label="员工名称" align="center" key="name" prop="name" />
        <el-table-column label="手机号码" align="center" key="mobile" prop="mobile" />
        <el-table-column label="同步内容" align="center" key="remark" prop="remark" />
        <el-table-column label="同步时间" align="center" key="create_time" prop="create_time" />
      </el-table>
      <Pagination :total="total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @pagination-change="handlePaginationChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, watch, nextTick } from "@/TUIKit/adapter-vue";
  import { invite_user, getDepartmentlist, import_log, template } from "@/api/cf";
  import { ElMessage, ElMessageBox } from "element-plus";
  import axios from "axios";
  import router from "@/router";
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const pageInfo = ref({ page: 1, limit: 10 });
  const total = ref(0);
  const filelist = ref([]);
  const fileurl = ref("");
  const deptoptions = ref([]);
  const job_modeoptions = ref([]);
  const list = ref([]);
  const queryParams = ref({ name: "", dept_id: "", position: "", hired_time: "", job_status: "", mobile: "" });
  const searchForm = ref({ name: "", times: [] });
  const emit = defineEmits<{ (event: "update:visible", value: boolean): void; (event: "chananniu", value: ""): void ;(event: "success", value: ""): void }>();
  // 获取表单引用
  const queryForm = ref({ AgentId: "", AppKey: "", AppSecret: "" });
  const uploadRef = ref(null); // 引用 el-upload 组件
  const rules = reactive({
    AgentId: [{ required: true, message: "请填写AgentId", trigger: "blur" }],
    AppKey: [{ required: true, message: "请填写AppKey", trigger: "blur" }],
    AppSecret: [{ required: true, message: "请填写AppSecret", trigger: "blur" }],
  });
  // 监听 localValue 的变化，通知父组件更新值
  watch(
    () => props.visible,
    newValue => {
      if (newValue) {
        getDepartmentlist().then(res => {
          deptoptions.value = res.data;
        });
      }
    }
  );

  const addvisible = ref(false);
  const datetime = ref([]);
  const selectedArrRef = ref(null);
  const jkurl = ref("https://demo-api.niuyuwang.com/");
  const childMethod = () => {
    filelist.value = [];
    fileurl.value = "";
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    if (uploadRef.value) {
      uploadRef.value.clearFiles();
    }
  };

  defineExpose({
    childMethod,
  });

  const handlePaginationChange = ({ page, size }: { page: number; size: number }) => {
    pageInfo.value.page = page;
    pageInfo.value.limit = size;
    list.value = [];
    getimport_log();
  };

  function downmb() {
    // template().then(res => {
    //   const url= res.data.$dingTalkTb

    //     router.push({
    //   path: "/pdfdetail",
    //   query: {url}, // 传递查询参数
    // });

    const url = jkurl.value + "钉钉导入操作流程.pdf";

    let routeData = router.resolve({ path: "/pdfdetail", query: { url } });
    window.open(routeData.href, "_blank");
    // router.push({
    //   path: "/pdfdetail",
    //   query: { url },
    // });
  }
  function getimport_log() {
    const data = {
      type: 3,
      ...searchForm.value,
      ...pageInfo.value,
    };
    import_log(data).then(res => {
      list.value = res.data.list;
      total.value = res.data.total;
    });
  }

  function handleQuery() {
    pageInfo.value.page = 1;
    pageInfo.value.limit = 10;
    list.value = [];
    getimport_log();
  }
  function cancel() {
    emit("update:visible", false);

    emit("chananniu", "");
  }
  function submitForm() {
    // if (!fileurl.value) {
    //   ElMessage({
    //     message: "请导入文件",
    //     grouping: true,
    //     type: "error",
    //   });
    // }
    let formData = new FormData();
    formData.append("excel", fileurl.value);
    let token = localStorage.getItem("token");
    axios
      .post("https://demo-api.niuyuwang.com/hr/userinfo/dingTalkImport", formData, {
        headers: { "Content-Type": "multipart/form-data", token: token },
      })
      .then(response => {
        if (response.data.code == 1) {
          handleQuery();
          ElMessage({
            message: "导入成功",
            grouping: true,
            type: "success",
          });
             emit("success", "");
        } else {
          ElMessage({
            message: response.data.msg,
            grouping: true,
            type: "error",
          });
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

  function handleExceed(files, fileList) {
    uploadRef.value.clearFiles();

    nextTick(() => {
      uploadRef.value.handleStart(files[0]);
    });
    // ElMessage({
    //   title: "错误",
    //   message: `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
    //   grouping: true,
    //   type: "error",
    // });
    //     filelist.value = fileList;
  }
  function handleChansge(file, fileList) {
    let name = file.name;
    if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
      ElMessage({
        title: "错误",
        message: "上传文件只能为excel文件，且为xlsx,xls格式",
        grouping: true,
        type: "error",
      });
      return false;
    }
    // console.log(file, "de厨房了");

    filelist.value = fileList;
    fileurl.value = file.raw;

    // this.$axios1.post(url, formData, config); //也可以这种 我这里是封装的
    // zidingyiupload(formData)
    //   .then(res=> {
    //     console.log(res,"sgsgsgsgsg");

    //     ElMessage({
    //       message: "上传成功",
    //       grouping: true,
    //       type: "success",
    //     });
    //   })
    //   .catch(err => {
    //     ElMessage({
    //       message: err,
    //       grouping: true,
    //       type: "error",
    //     });
    //   });
  }
</script>

<style lang="scss" scoped>
  .boardBox2 {
    display: flex;
    flex-direction: column;

    overflow-y: scroll;
    max-height: calc(100vh - 210px);

    &::-webkit-scrollbar {
      display: none;
    }

    -ms-overflow-style: none;
    scrollbar-width: none;

    .tishi {
      font-size: 14px;
      color: #999;
      background-color: #f3f8fb;
      padding: 5px 10px;
      border-radius: 6px;
    }

    .font16 {
      font-size: 16px;
    }

    .el-upload_tip {
      font-size: 15px;
    }

    .impborderleft {
      border-left: 1px solid #eaeaea;
    }

    .down_zi {
      font-size: 16px;
      color: #01509f;
      cursor: pointer;
    }

    .uploadk {
      border-radius: 8px;

      padding: 20px 0px;
      font-size: 14px;
      color: #999;
    }

    .avatar-uploader {
      width: 100%;
      text-align: center;
    }

    .impzi1 {
      font-size: 16px;
      color: #666;
    }

    .impzi2 {
      font-size: 14px;
      color: #999;
    }

    .importcontent {
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      font-size: 15px;
      color: #666;
      background-color: #f3f8fb;
      border-radius: 8px;
      line-height: 25px;
    }

    .dtpborder_bottom {
      border-bottom: 1px solid #eaeaea;
      padding-bottom: 10px;
      padding-top: 10px;
    }

    .bzpng {
      width: 16px;
      height: 16px;
      background: url(@/assets/image/cf/img07.png) no-repeat center center;

      background-size: 15px 15px;
      margin-top: 2px;
    }
  }
</style>

<style lang="scss">
  .boardBox2 .el-upload {
    width: auto !important;
  }
</style>
